<template>
	<view class="content">
		<view class="header">

			<view :style="{height: systemBarHeight + 'px'}">
			</view>
			<view class="header_title">
				<text>登 录</text>
			</view>

			<view class="xy_tit1">
				<text>欢迎登录学员端</text>
			</view>
			<view class="xy_tit2">
				<text>镇原县平安汽车驾驶学校</text>
			</view>
			<view class="login">
				<view class="iphone">
					<text>手机号</text>
					<input type="text" value="" placeholder="请输入您的手机号" placeholder-class="ipt" />
				</view>
				<view class="password">
					<text>密码</text>
					<input type="text" value="" placeholder="请输入您的密码" placeholder-class="ipt" />
				</view>

				<view class="login_bt" @click="login()">
					<text>登录</text>
				</view>
				<view class="wjpassword">
					<text>忘记密码？</text>
				</view>

				<view class="switch_login" @click="jllogin()">
					<text>学员登录</text>
				</view>
				<view class="agreement">
					<u-checkbox v-model="checked" shape="circle" @change="checkboxChange"></u-checkbox>
					我已阅读并同意 <text>《用户协议》和《隐私政策》</text>
				</view>
			</view>
		</view>

		<view class="popup">
			<u-popup :show="show" :round="10" mode="center" @close="close" @open="open">
				<view class="tc_po">
					<view class="ts_img">
						<image src="/static/xy/ts.png" mode=""></image>
					</view>
					<view class="ts_tit">
						<text>温馨提示</text>
					</view>
					<view class="ts_tit1">
						<text>学员使用该平台需要支付5元使用费</text>
					</view>

					<view class="pay">
						<text>支付</text>
					</view>
					<view class="nopay">
						<text>暂不使用</text>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemBarHeight: 0,
				show: false
			}
		},
		mounted() {
			/* 手机顶部高度 */
			this.getSysteminfo()
		},
		methods: {
			/* 手机顶部高度 */
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			checkboxChange(n) {
				console.log('change', n);
			},
			login() {
				uni.navigateTo({
					url: '/pagesA/tabbar'
				})
			},
			jllogin() {
				uni.navigateTo({
					url: '/pages/index/login'
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
	}

	.header {
		background-image: url("");

		background-repeat: no-repeat;
		background-size: 100% 750rpx;
	}

	.header_title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 34rpx;
		color: #FFFFFF;
		margin: 20rpx auto 0;
		display: flex;
		justify-content: center;
	}

	.xy_tit1 {

		width: 86%;
		margin: 76rpx auto 0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 56rpx;
		color: #FFFFFF;
		line-height: 84rpx;

	}

	.xy_tit2 {
		width: 86%;
		margin: 8rpx auto 0;

		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;

	}

	.login {
		width: 750rpx;
		height: 1196rpx;
		margin-top: 56rpx;
		background-repeat: no-repeat;

		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;

		.iphone {
			width: 86%;
			margin: auto;
			padding-top: 76rpx;
			padding-bottom: 22rpx;
			border-bottom: 2rpx solid #E9E9E9;

			>text {

				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #43484D;
			}

			>input {
				margin-top: 22rpx;
			}

			/deep/ .ipt {

				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #A4AAA3;
			}

		}

		.password {
			width: 86%;
			margin: 44rpx auto 0;
			padding-bottom: 22rpx;
			border-bottom: 2rpx solid #E9E9E9;

			>text {

				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #43484D;
			}

			>input {
				margin-top: 22rpx;
			}

			/deep/ .ipt {

				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #A4AAA3;
			}
		}

		.login_bt {
			width: 86%;
			height: 96rpx;
			background: #53DDA8;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: 58rpx auto 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.wjpassword {
			width: 86%;
			margin: 16rpx auto 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #B1B1B1;
			display: flex;

			>text {
				margin-left: auto;
			}
		}

		.switch_login {
			margin: 200rpx auto 0;
			display: flex;
			justify-content: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #53DDA8;
			line-height: 48rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.agreement {
			margin-top: 200rpx;
			justify-content: center;
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #C7C9C6;

			>text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #53DDA8;
			}
		}

	}

	.tc_po {
		width: 616rpx;
		height: 594rpx;
		background: linear-gradient(180deg, #E4FFF5 0%, #FFFFFF 100%);
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		.ts_img {
			display: flex;
			justify-content: center;

			>image {
				width: 160rpx;
				height: 160rpx;
				margin-top: -80rpx;
			}
		}

		.ts_tit {
			margin-top: 42rpx;
			display: flex;
			justify-content: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 44rpx;
			color: #43484D;

		}

		.ts_tit1 {
			margin-top: 24rpx;
			display: flex;
			justify-content: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #5D5F5E;

		}

		.pay {
			margin: 80rpx auto 0;
			width: 552rpx;
			height: 88rpx;
			background: #53DDA8;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.nopay {
			margin: 32rpx auto 0;

			width: 552rpx;
			height: 88rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #D7D5D1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #43484D;

		}
	}
</style>